<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="author" content="order by womengda.cn/" />
	<title>舰船介绍</title>
	<link rel="icon" href="./static/v4/images/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="./static/v4/css/public.css">
	<link rel="stylesheet" href="./static/v4/css/join.css">
	<script src="./static/v4/js/jquery.min.js"></script>
</head>
<body>
	<div class="nav">
		<div class="nav_con">
			<img class="logo" src="./static/v4/images/logo.png" width="10%"/>
			<img class="logo_infro" src="./static/v4/images/logo_infro.png" width="15%"/>
			<ul class="nav_ul">
				<li class="nav_li"><a href="index.html">首页</a><div></div></li>
				<li class="nav_li"><a href="about.html">关于舰盟</a><div></div></li>
				<li class="nav_li"><a href="game.html">游戏机制</a><div></div></li>
				<li class="li_ep" class="active_hover">舰船介绍<div class="li_list"><a href="join.html">水面舰船</a></div><div class="li_list"><a href="contact.html">航母</a></div>
				</li>
				<li class="nav_li"><a href="work.html">游戏术语</a><div></div></li>
				<li class="nav_li"><a href="http://lohax.gitee.io/dorm319">寝室主页</a><div></div></li>
			</ul>
		</div>
	</div>
	<audio controls="controls" loop=-1 autoplay=1 class="guding">
  	 	 <source src="static/v4/images/There's a Light - We Choose To Go To The Moon.mp3" type="audio/mp3" />
	</audio>
	<div class="game_banner"></div>
	<div class="join">
		<div class="join_tab_main">
			<div class="join_tab">
				<ul>
					<li class="addBlue">战列舰</li>
					<li>驱逐舰</li>
					<li>巡洋舰</li>
					
					
					
				</ul>
			</div>
			<div class="join_tab_con">
				<ul class="father">
					<li class="li_first">
						<ul>
							<li class="li_li_frist">国别</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
<script>
	$(function() {
		var data = {
			kind:[""],
			gong:[["日战","美战","德战","法战","英战"],["日系","美系","英系"],["美系","日系","英系","苏系","德系"]],
			infro1:[["1、拥有很好的散步和精度;<br>2、火炮口径大，标伤较高，弹速较快，能有效打击;<br>3、舵效差，机动性不足，侧面极脆，皇居核心;<br>4、雷伤减免高。","1、超重弹，威力较大，但是弹速慢;<br>2、航速机动性能不错;<br>3、防空数值高，各方面很均衡","1、拥有穹甲防护，近战无敌;<br>2、副炮火力极强，但主炮性能较差，散布不好;<br>3、机动性能较差，转舵一般，隐蔽低。","1、拥有引擎增压消耗品，而且航速奇快;<br>2、基础生命值是同级里面最少的<br>3、拥有很强大的转场能力和绕侧破局能力;<br>4、部分还拥有独特的主炮快速装填消耗品。","1、较短的维修时间反而拥有其他舰船1.5倍的回复量，减少了一次维修使用次数，;<br>2、独特的纵向散布专治卖头怪;<br>3、拥有更强大的弹射起步和打伸缩炮的能力;<br>4、AP和MAP或核弹he配合无死角爆敌舰核心或者刷半伤或火灾"],["1、鱼雷特别强;<br>2、相对而言主炮就很不尽人意了;","1、主炮鱼雷双修，转炮特别快;<br>2、弗莱彻和基林防空特化且可选择装备防空弹幕","1，高穿HE，鱼雷隐蔽好，敌方发现时已经来不及闪躲;<br>2、拥有专属的火车烟（拉烟间隔长，烟雾持续时间短，拉烟时间长）"],["1、美轻巡投射量极高（但一般打上去都是碎弹），防空极强，拥有专属消耗品集群防空弹幕和精确火控雷达，;<br>2、美重巡防空依旧强劲，但用射程换取了更大口径的主炮，共同特点是弹道高弹速慢","1、弹道低，弹速高，防空弱，he伤害点火率都很可观;<br>2、要么纸糊装甲要么血量不足","1、核弹ap，动力强劲，拆战列特别爽;<br>2、有专属的烟雾消耗品，可以提高容错率","1、高航速，高射程，高弹速，低弹道，远距离抛屎船;<br>2、从恰巴耶夫开始拥有差异船头装甲","1、弹速吓人很难躲开，都拥有专属消耗品水底搜索;<br>2、后期重巡特点是隐蔽差，机动差，但是防空高，投射量大",]],
			infro2:[["1、远程射手，对走位和炮术要求极高;","1、由于较差的弹速不适合远距离，适合中近距离;<br>2、适合拖刀，抗线等打法，其中顶战蒙大拿是活动之子，推荐萌新先玩","1、拥有极高血量和很好的近战防护，适合近战;<br>2、强有力的副炮可以配合压制小船;<br>3、由于隐蔽差，注意不要被集火;<br>4、不推荐萌新玩;","1、法系超跑;<br>2、拉侧攻击两翼侧面，不适合站中抗线;","1、当之无愧的攻坚船;<br>2、是推进战线的主力;"],["1、隐匿中的杀手;","1、均衡型选手;","1、烟驱"],["1、大山之子;","1、公海舞王","1、烟中恶鬼","1、头铁的苏维埃超人","1、重巡，大巡;"]]
		}
		for(var i = 0 ;i < data.gong[0].length; i++) {
			$(".li_first").after("<li class='li_ohter'><ul><li class='li_li_frist'>"+data.gong[0][i]+"</li><li>"+data.kind[0]+"</li><li></li><li></li><li></li><li style='position: relative;'><img src='./static/v4/images/joindown.png' style='position: absolute;left: 120px;top: 18px;width: 25%;'></li></ul><li class='content'><div class='content_div'><div class='c_d_title'>能力：</div><div class='c_d_font'>"+data.infro1[0][i]+"</div><div class='c_d_title'>一般定位：</div><div class='c_d_font'>"+data.infro2[0][i]+"</div><div class='c_d_btn'></div></div></li>");
		}

		console.log(data);
		function play() {
		};
		play.prototype = {
			NavHover:function() {
				$(".nav_li").hover(function() {
					$(this).find('div').stop().animate({"width":"100%"},300);
				},function() {
					$(this).find('div').stop().animate({"width":"0px"},200);
				});
			},
			Background:function(a,b,c) {
				$(a).removeClass(b);
				$(c).addClass(b);
			},
			init:function() {
				$(".content").css("height","0px");
				$(".content_div,.content").hide();
			},
			Tab:function(a,b) {
				var turn = 1;
				$(document).on("click",a,function() {
					Play.Background(a,b,this);
					if(a == ".join_tab_con .father .li_ohter") {
						if(turn == 1) {
							Play.init();
							$(this).find("img").attr("src","./static/v4/images/joinup.png");
							if($(this).next().css("height") < "2px") {
								$(this).next().animate({"height":"480px"},200);
								$(this).next().show();
								$(this).next().find(".content_div").show();
							}
							turn = 0;
						}else {
							Play.init();
							$(a).find("img").attr("src","./static/v4/images/joindown.png");
							turn =1;
						}
					}else {
						$(".li_ohter").remove();
						Play.init();
						var index = $(this).index();
						for(var i = 0 ;i < data.gong[index].length; i++) {
							$(".li_first").after("<li class='li_ohter'><ul><li class='li_li_frist'>"+data.gong[index][i]+"</li><li>"+data.kind[index]+"</li><li</li><li></li><li></li><li style='position: relative;'> <img src='./static/v4/images/joindown.png' style='position: absolute;left: 120px;top: 18px;width: 25%;'></li></ul><li class='content'><div class='content_div'><div class='c_d_title'>能力：</div><div class='c_d_font'>"+data.infro1[index][i]+"</div><div class='c_d_title'>一般定位：</div><div class='c_d_font'>"+data.infro2[index][i]+"</div><div class='c_d_btn'></div></div></li>");
						}
					}
				});
			}
		}
		var Play = new play()
		Play.NavHover();
		Play.Tab(".join_tab_con .father .li_ohter","addF2FBFF");
		Play.Tab(".join_tab ul li","addBlue");
		
	})
</script>